/* 
==================== 按钮样式 ====================
(注: 必须同时引用'var.wxss'和'init.wxss')
目录(ctrl+F):
  ※普通按钮: my__button
  ※背景按钮: my__btn-bg / my__btn-bg_red / my__btn-bg_green
  ※边框按钮: my__btn-border
  ※文字按钮: my__btn-font
  ※链接按钮: my__btn-link
  ※上浮按钮(特有): my__btn-absolute
*/

@mixin button{
  height: var(--height_button);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  font-size: var(--fontSize);
  color: var(--font_color);
  white-space: nowrap;
  overflow: hidden;
  >image{
    max-height: 100%;
    max-width: 100%;
  }
}
// ========== ※普通按钮 ==========
.my__button{ @include button; }

// ==========背景按钮 ==========
@mixin btn-bg{
  border-radius: var(--borderRadius);
  color: #fff;
}
.my__btn-bg{
  @include button;
  @include btn-bg;
  background-color: var(--color_adorn1);
  &.btn-hover{ background-color: rgba(3, 74, 153, .8) } // 按钮经过
}
// .my__btn-bg.disabled{ // 禁用
//   background-color: #ececec;
//   cursor: not-allowed;
// }
.my__btn-bg_red{ // 红色背景
  @include button;
  @include btn-bg;
  background-color: var(--color_red);
  &.btn-hover{ background-color: rgba(255, 102, 102, .8) } // 按钮经过
}
.my__btn-bg_green{ // 绿色背景
  @include button;
  @include btn-bg;
  background-color: var(--color_green);
  &.btn-hover{ background-color: rgba(0, 153, 102, .8) } // 按钮经过
}

// ========== ※边框按钮 ==========
.my__btn-border{
  @include button;
  border: 2rpx solid var(--color_adorn1);
  border-radius: var(--borderRadius);
  color: var(--color_adorn1);
}

// ========== ※文字按钮 & ※链接按钮 ==========
@mixin btn-font{
  @include button;
  height: auto;
  line-height: var(--height_form);
  padding: 0;
  color: rgb(145, 169, 207);
  &.btn-hover{ color: rgba(145, 169, 207, .8) } // 按钮经过
}
.my__btn-font{ // 文字
  @include btn-font;
}
.my__btn-link{ // 链接
  @include btn-font;
  text-decoration: underline;
}

// ========== ※上浮按钮(特有)(圆形) ==========
.my__btn-absolute{
  @include button;
  height: var(--height_button);
  width: var(--height_button);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: var(--boxShadow1);
  border: .1em solid currentColor;
  padding: 0;
  position: absolute;
  bottom: var(--space); right: var(--space);
  >view{
    font-size: calc(var(--height_button) * .6);
  }
}
// ========== ※上浮按钮(特有)(方形) ==========
.my__btn-absolute_square{
  @include button;
  height: var(--height_button);
  width: var(--height_button);
  background-color: #fff;
  box-shadow: var(--boxShadow1);
  padding: 0;
  position: absolute;
  bottom: var(--space); right: var(--space);
  >view{
    font-size: calc(var(--height_button) * .6);
  }
}